<script src="<?php echo APP_HTML_JS_PATH; ?>raphael/raphael-min.js"></script>
<script src="<?php echo APP_HTML_JS_PATH; ?>raphael/g.raphael-min.js"></script>
<script src="<?php echo APP_HTML_JS_PATH; ?>raphael/g.bar.js"></script>
<script src="<?php echo APP_HTML_JS_PATH; ?>jquery.dateFormat-1.0.js"></script>
<style type="text/css">
  .tbl-user {
    white-space: nowrap;
  }

  *[data-charts] {
      margin:   0 auto;
      overflow: visible;
  }
  .span8 thead th {
    white-space: nowrap;
  }
  .span8 div[id$=content] {
    margin: 10px 0 0 0;
  }
  .span8 .rule {
    position: relative;
    max-height: 0px;
    height: 0px;
    overflow: visible;
    z-index: 998; 
  }
  .span8 .rule div {
    position: relative;
    overflow: visible;
    max-height: 0px;
    height: 0px;
    cursor: default;
  }
  .raphael-value {


    color: #000;
    top:  7px;
    font-size:   19px;
    z-index: 998;
  }
  .raphael-date {
    top:    1px;
    left: -10px;
    /*left: 90px;
    color: #fff;*/
    margin: 0;
    color:       #666666;
    font-size:   0.85em;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 999;
  }
  .pageTitle {
    margin: 0 0 6px 0;
  }
  .raphael-value span {
    /*text-shadow: 1px 1px 1px #ccc;*/
    padding: 0 0 0 3px;

  }
</style>
<script type="text/javascript">
  function toggle_ds(btn) {
      var sbtn = $(btn),
          dsc = $('#'+btn.id+'-content');

      if (dsc.hasClass('hidden')) {
          dsc.removeClass('hidden');
          sbtn.find('i').attr('class','').addClass('icon-white icon-chevron-up');
          sbtn.find('span').html(' Свернуть');
      } else {
          dsc.addClass('hidden');
          sbtn.find('i').attr('class','').addClass('icon-white  icon-chevron-down');
          sbtn.find('span').html(' Развернуть');
      }
  }
  var bData = function(data) {
          var chartsData = {
            id:       [],
            value:    [],
            title :   [],
            top:      []
          };
          var i = 0;
          $.each(data, function(index, element) {
            chartsData.value[i] = (element.value);
            chartsData.title[i] = (element.title);
            if (element.date) chartsData.title[i] = $.format.date(element.date + " 00:00:00.000", "MMM d");
            i++;
          });
          return chartsData;
  }

  $(document).ready(function(){
      var rel = {
        left: 34,
        top:  0
      }

      $('.nav-list .active a').each(function(){
        $('.pageTitle').text($(this).text());
      });
      $("*[data-charts]").each(function(){
          var holder = $('<div class="holder"/>').data(   $.parseJSON( $(this).attr('data-charts') )   );
          

          $(this)
            .css({
                    position: 'relative',
                    left: 10
                })
            .removeAttr('data-charts').append(holder);

          var chartsData = bData(holder.data()),
              l = chartsData.value.length,
              rule = $('<div class="rule"></div>').prependTo($(this));

          $.each(chartsData.title, function(i, t){
              var txt = {
                  value: chartsData.value[i],
                  title: chartsData.title[i]
              }
              $('<div>')
                  // .css({ top: this.attr('y') - 4 })
                  .append(
                      $('<div class="raphael-date">').append($('<span/>').text(txt.title)),
                      $('<div class="raphael-value">').text(txt.value).wrapInner('<span/>')
                  )
                  .prependTo(rule);
          });
          var maxWidth = 0;
          rule.find('.raphael-date').children('span').each(function(){
            if (maxWidth < $(this).width()) maxWidth = $(this).width();
          });
          if (rel.left < maxWidth) {
            rel.left = (maxWidth - rel.left + 30);
          }
          rule.find('.raphael-value').css({ left: rel.left })
          holder.css({
            position: 'relative',
            height:   $(this).height(),
            top:      0,
            height:   30 * chartsData.value.length
          });
          
          var w            = $(this).width(),
              h            = $(this).height(),
              paper        = Raphael( holder.get(0), w, h),
              txtattr      = { font: '12px sans-serif', 'font-weight': 'bold' },
              i            = 0,
              defaultColor = '#94b6e9',
              fill = { type: 'sharp', colors: [] };

          $.each(chartsData.value, function(i, v){
              fill.colors.push(defaultColor);
          });

          var b = paper.g.hbarchart(
                rel.left, 0, holder.width() - rel.left, holder.height(),
                chartsData.value,
                fill
            ).each(function(){
                console.dirxml();
                $(rule.children().get(i)).css({
                  top: this.attr('y') - 4
                });
                /*var txt = {
                    value: chartsData.value[l - i - 1],
                    title: chartsData.title[l - i - 1]
                }
                $('<div>')
                    .css({ top: this.attr('y') - 4 })
                    .append(
                        $('<div class="raphael-date">').append($('<span/>').text(txt.title)),
                        $('<div class="raphael-value">').text(txt.value).wrapInner('<span/>')
                    )
                    .prependTo(rule);*/
              i++;
            });
          
          var st = paper.set();
      });
      userImgCleaner();
      //console.log(document.location);
      if (document.location.search.substr(1) == 'lm-browsers') $('.pageTitle').remove();
  });
  function userImgCleaner() {
      $(".userphoto-container img").error(function(){
          $(this).attr('src', '/app/img/users/0.png');
      });
  }
  
</script>
<h3 class="pageTitle">&ensp;</h3>
